<template>
    <!-- 列表商品组件 -->
    <div class="commodity_list">
		<div class="new_list_box">
			<div class="img_box">
				<!-- 商品图片 -->
				<van-image fit="cover" width="120" height="120"  radius="2" :src="data?.productImages ? data?.productImages + '?x-oss-process=image/resize,w_300' : ''" />
			</div>
			<div class='right_box'>
				<!-- 商品名字和状态 -->
				<div class="mz_zt_box">
					<div class="name">{{ data?.styleName }}</div>
					<div
					    :class="{ tag: true, tag_lan: data?.shelvesStatus == 1, tag_lv: data?.shelvesStatus == 2, tag_red: data?.shelvesStatus == 3 }">
					    {{ auditStatusNameById(data?.shelvesStatus)
					    }}</div>
				</div>
				<!-- 卖点 -->
				<div class='md_box'>{{ data?.sellingPoints }}</div>
				<div class='name_hjh'>
					<!-- 招商员 -->
					<div class="zsy_box">招商员<span>|</span>{{ data?.recruiterUserName }}</div>
					<!-- 货架号 -->
					<div class="hjh_box" v-if="data?.stockInfo?.locationName">
						<div class="bk">货</div>
						<div class="hhh">{{ data?.stockInfo?.locationName }}</div>
					</div>
				</div>
				<div class="jyj_box">
					<!-- 价格 -->
					<div class="jgbox">
						<span v-if="data?.mechanismList[0].cooperationMode === '分佣'">￥{{ data?.mechanismList[0].price
						    }}</span>
						<span v-else>￥{{ data?.mechanismList[0].costPrice }}</span>
					</div>
					<!-- 佣金 -->
					<div class="yj_box" v-if="data?.mechanismList[0].cooperationMode === '分佣'">
						<div class="yj">佣</div>
						<div class="bfb_y">{{data?.mechanismList[0].commission }}%</div>
					</div>
					<!-- 机制 -->
					<div class='jj_box'>
						{{ data?.mechanismList[0].liveStreamingMechanism }}
					</div>
				</div>
				<!-- 规格材质 -->
				<div class="gggcz_box">
					{{ data?.specs }}
				</div>
				<div class="bmkc_box">
					<div class="bm">{{ data?.stockCode }}</div>
					<div class="kc">
						<div class="kc_z">库存</div>
						<div class="dsj">{{ data?.stockInfo?.stockAvailable }}件</div>
					</div>
				</div>
			</div>
		</div>
		
		
        <div class="list_top" style='display:none;'>
            <div class="list_top_img">
                <van-image width="90" height="90" radius="2" :src="data?.productImages ? data?.productImages + '?x-oss-process=image/resize,w_300' : ''" />
                <img src="" alt="">
                <div class="list_top_img_tag" v-if="data?.mechanismList[1]?.cooperationMode">多机制</div>
            </div>
            <div class="list_top_right">
                <div class="list_top_right_title">
                    <div class="title">{{ data?.styleName }}</div>
                    <div
                        :class="{ tag: true, tag_lan: data?.shelvesStatus == 1, tag_lv: data?.shelvesStatus == 2, tag_red: data?.shelvesStatus == 3 }">
                        {{ auditStatusNameById(data?.shelvesStatus)
                        }}</div>
                </div>
                <div class="list_top_right_introduce">{{ data?.sellingPoints }}</div>
                <div class="list_top_right_money">
                    <div class="money_left">
                        <span v-if="data?.mechanismList[0].cooperationMode === '分佣'">￥ {{ data?.mechanismList[0].price
                            }}</span>
                        <span v-else>￥ {{ data?.mechanismList[0].costPrice }}</span>
                        <span v-if="data?.mechanismList[0].cooperationMode === '分佣'">佣 {{
                            data?.mechanismList[0].commission }}%</span>
                    </div>
                    <div class="money_right">{{ data?.mechanismList[0].coreName }}</div>
                </div>
            </div>
        </div>
        <div class="list_text" style='display:none;'>
            <div class="list_text_p">
                <div class="list_text_p_left">机制：</div>
                <div class="list_text_p_right">{{ data?.mechanismList[0].liveStreamingMechanism }}</div>
            </div>
            <div class="list_text_p">
                <div class="list_text_p_left">招商员：</div>
                <div class="list_text_p_right">{{ data?.recruiterUserName }}</div>
            </div>
            <div class="list_text_p">
                <div class="list_text_p_left">规格/材质：</div>
                <div class="list_text_p_right">{{ data?.specs }}</div>
            </div>
            <!-- <div class="list_text_p">
                <div class="list_text_p_left">发起时间：</div>
                <div class="list_text_p_right">{{ data?.requestTime }}</div>
            </div> -->
            <div class="list_text_p">
                <div class="list_text_p_left">当前库存：</div>
                <div class="list_text_p_number">{{ data?.stockInfo?.stockAvailable }}件</div>
            </div>
            <div class="list_text_p" v-if="data?.stockInfo?.locationName">
                <div class="list_text_p_yard">{{ data?.stockInfo?.locationName }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
defineProps({ data: { type: Object, default: () => { } } })

// 商品状态反显
const auditStatusNameById = (shelvesStatus: string | number) => {
    switch (shelvesStatus) {
        case 1:
            return '已入库'
        case 2:
            return '已上架'
        case 3:
            return '已下架'
        case 4:
            return '待下架'
        default:
            break;
    }
}
</script>

<style lang="less" scoped>	
.new_list_box{
	.right_box{
		.bmkc_box{
			.dsj{
				font-size: 12px;
				color: #0094FF;
				line-height:20px;
			}
			.kc_z{
				margin-right: 5px;
				width: 34px;
				height: 20px;
				background: #0094FF;
				border-radius: 5px;
				font-size: 12px;
				color: #FFFFFF;
				line-height:20px;
				text-align: center;
			}
			.kc{
				display: flex;
				background: #EBF4FF;
				border-radius: 5px;
				padding-right: 5px;
			}
			.bm{
				width: 0px;
				max-width: fit-content;
				flex: 1;
				font-size: 12px;
				color: #3F68DB;
				background: #EBF4FF;
				border-radius: 5px;
				padding: 4px 5px;
				margin-right: 10px;
			}
			align-items: center;
			display: flex;
		}
		.gggcz_box{
			width: 225px;
			font-size: 12px;
			color: #8492AD;
			margin-bottom: 5px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.jyj_box{
			.jj_box{
				font-size: 12px;
				color: #FF5A1A;
				padding: 2px 5px;
				border-radius: 2px;
				border: 1px solid #FF5A1A;
				max-width: fit-content;
				width: 0;
				flex: 1;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.yj_box{
				.bfb_y{
					font-size: 12px;
					color: #1B1714;
					line-height: 16px;
				}
				.yj{
					margin-right: 5px;
					width: 22px;
					height: 16px;
					background: #1B1714;
					border-radius: 2px;
					text-align: center;
					line-height: 16px;
					font-size: 12px;
					color: #CEA46C;
				}
				display: flex;
				margin-right:10px;
				height: 16px;
				padding-right: 5px;
				background: linear-gradient( 136deg, #E9D1A5 0%, #CEA46C 100%);
				border-radius: 2px;
			}
			.jgbox{
				margin-right: 10px;
				font-size: 18px;
				color: #FC2540;
			}
			align-items: center;
			display: flex;
			margin-bottom: 3px;
		}
		.name_hjh{
			.hjh_box{
				.hhh{
					font-weight: 500;
					font-size: 12px;
					color: #B5884A;
					line-height: 20px;
				}
				.bk{
					width: 20px;
					height: 20px;
					background: #B5884A;
					border-radius: 5px;
					font-weight: 400;
					font-size: 12px;
					color: #FEF6E2;
					text-align: center;
					line-height: 20px;
					margin-right: 6px;
				}
				background-color: #FEF6E2;
				border-radius: 5px;
				display: flex;
				height: 20px;
				padding-right: 11px;
			}
			.zsy_box{
				span{margin:0 5px;}
				max-width:110px;
				font-size: 12px;
				color: #B5884A;
				padding: 4px 5px;
				background: #FEF6E2;
				border-radius: 5px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				margin-right:10px;
				display: flex;
				align-items: center;
			}
			display: flex;
			margin-bottom: 3px;
			// justify-content: space-between;
		}
		.md_box{
			width: 225px;
			font-size: 12px;
			color: #8492AD;
			margin-bottom: 3px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.mz_zt_box{
			.tag_lan {
			    background: #EBF4FF;
			    color: #0094FF;
			}
			
			.tag_red {
			    background: #FDE7E7;
			    color: #FC2540;
			}
			
			.tag_lv {
			    background: #E7FDEE;
			    color: #19D11B;
			}
			.tag {
			    width: 67px;
			    height: 26px;
			    line-height: 26px;
			    text-align: center;
			    border-radius: 2px;
			    font-weight: 400;
			    font-size: 14px;
			}
			.name{width: 144px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-weight: 600;font-size: 16px;color: #1A1B1C;}
			display: flex;
			justify-content: space-between;
			margin-bottom: 3px;
		}
		
	}
	.img_box{
		.van-image{
			width: 120px !important;
			height: 120px !important;
		}
		width: 120px;
		height: 120px;
		margin-right: 10px;
	}
	display: flex;
}
@import url(../style//index.less);
</style>